---
image: /generated/articles-docs-shapes-heart.png
title: <Heart />
crumb: '@remotion/shapes'
---

import {ShapeSeeAlso, ShapeOptions} from '../../components/shapes/shapes-info';

_available from v4.0.315_

Renders an SVG element containing a heart.

## Explorer

<Demo type="heart" />

## Example

```tsx twoslash title="src/Heart.tsx"
import {Heart} from '@remotion/shapes';
import {AbsoluteFill} from 'remotion';

export const MyComposition = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Heart height={100} fill="red" stroke="black" strokeWidth={2} />
    </AbsoluteFill>
  );
};
```

## Props

<ShapeOptions shape="heart" all />

## See also

<ShapeSeeAlso shape="heart" />
